<template>
	<a-modal
		class="salemarket-edit"
		:visible="visible"
		:confirm-loading="confirmLoading"
		:title="
			item && item.id * 1 > 0
				? '修改批发市场`' + item.name + '`'
				: '添加批发市场 '
		"
		ok-text="确认保存"
		:mask-closable="false"
		@cancel="onClose"
		@ok="handleSubmit"
	>
		<a-form-model
			ref="formInline"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:model="formInline"
			:rules="rules"
			@submit="handleSubmit"
		>
			<a-button v-show="false" html-type="submit" />

			<a-form-model-item label="市场名称" prop="name" required>
				<a-input
					v-model="formInline.name"
					:max-length="32"
					placeholder="请输入名称"
				/>
			</a-form-model-item>

			<a-form-model-item label="状态">
				<a-select
					v-model="queryForm.status"
					placeholder="请选择状态"
					style="width: 200px"
					@change="statusChange"
					allowClear
				>
					<a-select-option
						v-for="(item, key, index) in statusMap"
						:value="key"
						:key="index"
					>
						{{ item.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item>

			<!-- <a-form-model-item label="租户ID" prop="tenant_id">
				<a-input-number
					v-model="formInline.tenant_id"
					placeholder="请输入租户ID"
				/>
			</a-form-model-item> -->

			<a-form-model-item label="地址">
				<app-tree-select
					v-model="formInline.area_code"
					radio
					:code="$e.city"
					style="width: 100%"
					@change="(data) => (formInline.area_name = data.area_name_all)"
				/>
			</a-form-model-item>
			<a-form-model-item :wrapper-col="buttonCol" label="详细地址">
				<a-input
					v-model="formInline.address"
					:max-length="255"
					placeholder="请输入"
				/>
			</a-form-model-item>

			<a-form-model-item label="描述">
				<a-textarea
					v-model="formInline.describe"
					style="margin-top: 10px"
					:auto-size="{ minRows: 3 }"
				/>
			</a-form-model-item>

			<a-form-model-item label="开业时间" v-if="flag">
				<a-time-picker
					@change="startTimeChange"
					v-model="startDefaultTime"
					format="HH:mm"
				/>
			</a-form-model-item>

			<a-form-model-item label="结业时间" v-if="flag">
				<a-time-picker
					@change="endTimeChange"
					v-model="endDefaultTime"
					format="HH:mm"
				/>
			</a-form-model-item>

			<a-form-model-item label="期望取货时间">
				<div class="expect-pickup-time">
					<a-input
						placeholder="请输入"
						suffix="分钟"
						v-model="formInline.pickup_time"
						style="width: 120px; margin-right: 20px"
					/>
				</div>
			</a-form-model-item>

			<a-form-model-item label="准备时间">
				<div class="expect-pickup-time">
					<a-input
						placeholder="请输入"
						suffix="分钟"
						v-model="formInline.prepare_time"
						style="width: 120px; margin-right: 20px"
					/>
				</div>
			</a-form-model-item>

			<a-form-model-item label="取货分段间隔">
				<a-select
					placeholder="请选择"
					style="width: 120px"
					v-model="formInline.pickup_interval_time"
					@change="pickupIntervalChange"
				>
					<a-select-option value="20">20分钟 </a-select-option>
					<a-select-option value="30"> 30分钟 </a-select-option>
					<a-select-option value="60">60分钟</a-select-option>
				</a-select>
			</a-form-model-item>

			<a-form-model-item label="准备分段间隔">
				<a-select
					placeholder="请选择"
					style="width: 120px"
					v-model="formInline.prepare_interval_time"
					@change="prepareIntervalChange"
				>
					<a-select-option value="20">20分钟 </a-select-option>
					<a-select-option value="30"> 30分钟 </a-select-option>
					<a-select-option value="60">60分钟</a-select-option>
				</a-select>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	import salemarket from "@/api/salemarket"
	import moment from "moment"
	export default {
		model: {
			//event:什么时候触发v-model行为
			event: "change-visible",
			// 定义传递给v-model的那个变量，绑定到哪个属性值上
			prop: "visible",
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			item: {
				type: Object,
				default: () => {
					return {
						id: 0,
						status: 1,
					}
				},
			},
		},
		data() {
			this.statusMap = {
				1: {
					status: "success",
					text: "正常",
				},
				0: {
					status: "default",
					text: "停用",
				},
				"-1": {
					status: "error",
					text: "冻结",
				},
			}
			return {
				rules: {
					name: [{ required: true, trigger: "change", message: "市场名必填" }],
				},
				// defaultTime: "",
				endDefaultTime: "",
				startDefaultTime: "",
				value: null,
				queryForm: {
					// searchkey: "",
					status: undefined, //placeholder 生效
				},
				// buttonCol: { span: 18, offset: 4 },
				buttonCol: { span: 18, offset: 0 },
				labelCol: { span: 5 },
				wrapperCol: { span: 18 },
				confirmLoading: false,

				formInline: {
					...this.item,
				},
				flag: true,
				mapVisible: false,

				uploadImageLoading: false,
			}
		},
		watch: {
			visible: function (showFlag) {
				if (!showFlag) return
				console.log(this.item)
				// this.formInline = {
				// 	status_flag: this.item.status == 1, // 默认正常
				// }

				this.resetFormFields()
				console.log(this.item)
				for (let ii in this.item) {
					this.$set(this.formInline, ii, this.item[ii])
				}
				if (this.item.id * 1 > 0) {
					// 编辑
					this.startDefaultTime = moment(this.formInline.start_time, "HH:mm")
					this.endDefaultTime = moment(this.formInline.end_time, "HH:mm")
				} else {
					this.startDefaultTime = ""
					this.endDefaultTime = ""
				}

				this.queryForm.status = this.item.status + ""
			},
		},
		created() {},
		mounted() {},
		methods: {
			moment,
			startTimeChange(time) {
				if (!time) {
					return
				}
				console.log(time.format("HH:mm"))
				this.formInline.start_time = time.format("HH:mm")
			},
			endTimeChange(time) {
				if (!time) {
					return
				}
				console.log(time)
				console.log(time.format("YYYY-MM-DD HH:mm:ss"))
				console.log(time.format("HH:mm"))
				this.formInline.end_time = time.format("HH:mm")
			},
			pickupIntervalChange(value) {
				console.log(value)

				this.formInline.pickup_interval_time = value
			},
			prepareIntervalChange(value) {
				console.log(value)
				this.formInline.prepare_interval_time = value
			},
			statusChange(value) {
				this.formInline.status = value
				console.log(value)
			},
			onClose() {
				this.$emit("change-visible", false)
			},
			onChange() {
				this.onClose()
				this.$emit("change")
			},
			resetFormFields() {
				this.formInline = {
					// start_time: "",
					// end_time: "",
					// pickup_interval_time: "",
					// prepare_interval_time: "",
					status_flag: this.item.status == 1, // 默认正常
				}

				// 解决开业时间、结业时间输入框不清空问题
				this.flag = false
				setTimeout(() => {
					this.flag = true
				})
			},
			async handleSubmit(e) {
				e.preventDefault()

				let flag = undefined
				this.$refs.formInline.validate((valid) => (flag = valid))
				if (!flag) {
					return
				}

				this.confirmLoading = true

				this.formInline.status = this.formInline.status * 1

				// 编辑的保存
				if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
					await salemarket
						.update(this.item.id, this.formInline)
						.then((response) => {
							if (response.code !== 1) {
								this.$message.error(response.message)
								return
							}
							this.$message.success(response.message)
							this.onChange()
							return
						})
					this.confirmLoading = false
					return
				}
				// 新增的保存
				await salemarket.create(this.formInline).then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}

					this.$message.success(response.message)
					this.onChange()
					this.resetFormFields()
					return
				})

				this.confirmLoading = false
			},
		},
	}
</script>

<style lang="less" type="text/less" >
	.salemarket-edit {
		.ant-form-item {
			margin-bottom: 6px;
		}

		.expect-pickup-time {
			.ant-input {
				padding-right: 40px !important;
			}
		}
	}
</style>
